<template>
  <el-row>
    <!-- 搜索栏 -->
    <el-col :span="6">
      <el-card id="search">
        <div class="search-item">
          <el-input v-model="searchModel.start" placeholder="起始站" clearable></el-input>
        </div>
        <div class="search-item">
          <el-input v-model="searchModel.end" placeholder="终点站" clearable></el-input>
        </div>
        <div class="search-item">
          <el-button @click="searchShowInfo" type="primary" round icon="el-icon-search">查询</el-button>
        </div>
        <div class="search-item">
          <el-button @click="clearSearch" type="text" icon="el-icon-close"></el-button>
        </div>
      </el-card>
    </el-col>
<!-- 结果列表和图片 -->
<el-col :span="18">
  <el-card v-if="showInfoList.length > 0">
    <el-table :data="showInfoList" stripe style="width: 100%">
      <el-table-column label="#" width="80">
        <template #default="{ $index, row }">
          {{ (currentPage - 1) * pageSize + $index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="startStation" label="始发站" width="120"></el-table-column>
      <el-table-column prop="endStation" label="终点站" width="120"></el-table-column>
      <el-table-column prop="enterIn" label="登机口" width="100"></el-table-column>
      <el-table-column prop="enterTime" label="登机时间" width="160">
         <template slot-scope="scope">{{ formatTime(scope.row.enterTime) }}</template>
      </el-table-column>
      <el-table-column prop="departureTime" label="起飞时间" width="160">
        <template slot-scope="scope">{{ formatTime(scope.row.departureTime) }}</template>
      </el-table-column>
      <el-table-column prop="landingTime" label="到达时间" width="160">
        <template slot-scope="scope">{{ formatTime(scope.row.landingTime) }}</template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      v-model="currentPage"
      :page-size="pageSize"
      :total="totalItems"
      @current-change="handlePageChange"
    ></el-pagination>
  </el-card>
  <el-card v-else>
    <div style="text-align: center; margin-top: 20px;">请输入进站-出站</div>
  </el-card>
  <!-- 图片框 -->
  <el-card>
    <img :src="require('@/assets/plane.jpg')" style="width: 100%; height: 400px; object-fit: contain;">
  </el-card>
</el-col>
 </el-row>
</template>
<script>
import axios from 'axios';
import moment from 'moment';
export default {
data() {
return {
currentPage: 1,
pageSize: 10,
totalItems: 0,
showInfoList: [],
searchModel: {
start: '',
end: ''
}
};
},
methods: {
searchShowInfo() {
if (!this.searchModel.start && !this.searchModel.end) {
this.$message.error('请输入搜索内容');
return;
}
this.currentPage = 1;
this.getShowInfo();
},
clearSearch() {
this.searchModel = {
start: '',
end: ''
};
},
handlePageChange(currentPage) {
this.currentPage = currentPage;
this.getShowInfo();
},
getShowInfo() {
const params = {
page: this.currentPage - 1,
size: this.pageSize,
searchCondition: {
start: this.searchModel.start,
end: this.searchModel.end,
},
};
this.showInfoList = []; // 清空showInfoList
axios.post('http://localhost:9999/jam/research1', params)
.then((response) => {
if (response.data.code === 20000) {
this.showInfoList = response.data.data.rows;
this.totalItems = response.data.data.total;
} else {
this.$message.error(response.data.message);
this.showInfoList = [];
this.totalItems = 0;
}
})
.catch((error) => {
console.error(error);
this.$message.error('没有您要查找的信息');
});
},
formatTime(time) {
if (!time) return '';
return moment(time, 'YYYYMMDDHHmmss').format('YYYY-MM-DD HH:mm:ss');
},
},
mounted() {
// Do not call getShowInfo here
}
};
</script>

<style scoped>
.search-item {
  margin-bottom: 20px;
}
</style>
